<template>
  <div>
    {{ configData }}{{ key2 }}{{ formData }}
    <el-select @change="editSubmit" v-model="formData.tmpParam" placeholder="请选择">
      <el-option
        v-for="item in dependency"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'TableDisplayEdit',
  props: {
    key2: {
      type: Number,
      default: null
    },
    configData: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    key2: {
      deep: true,
      handler (val) {
        alert(val)
      }
    },
    configData: {
      deep: true,
      handler (val) {
        this.formData = val
      },
      immediate: true
    }
  },
  data () {
    return {
      dependency: [{
          value: '选项1',
          label: 'aaa'
        }, {
          value: '选项2',
          label: 'bbb'
        }],
      formData: {
        tmpParam: ''
      }
    }
  },
  methods: {
    editSubmit (value) {
      console.log(value)
      this.$emit('editSubmit', this.formData)
    }
    },
    log: function (evt) {
      window.console.log(evt)
    }
}
</script>

<style>
.row{
    display: flex;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
</style>
